<template>
	<view class="login_box">
		<view class="title_box">
			<text class="title_text">我 去 图 书 馆</text>
			<view class="avator_box">
				<u-image class="avator" width="200rpx" height="200rpx" :src="avatorSrc"></u-image>
			</view>
			<text class="name">薛丹</text>
		</view>
		<view class="content">
			<text class="school_name">武汉纺织大学</text>
			<u-form :model="form" ref="uForm" :error-type="errorType">
				<u-form-item left-icon="account-fill" prop="code">
					<u-input v-model="form.code" :custom-style="Inputstyle" placeholder="学号" border-color="#ffffff" />
				</u-form-item>
				<u-form-item left-icon="lock-opened-fill" prop="password">
					<u-input v-model="form.password" :custom-style="Inputstyle" type="password" placeholder="初始密码为学号"
						border-color="#ffffff" />
				</u-form-item>
			</u-form>
			<u-button @click="submit" type="primary" :ripple="true" ripple-bg-color="#448fdd">登录</u-button>

			<!-- loading -->
			<wyb-loading @show="gologin" ref="loading" animation="zoom-lessen" title="登录中" />
			<u-top-tips ref="uTips"></u-top-tips>
		</view>
	</view>
</template>

<script>
	import axios from 'axios';
	// 引入load组件
	import wybLoading from '@/components/wyb-loading/wyb-loading.vue'
	export default {
		// 组件定义
		components: {
			wybLoading
		},
		data() {
			return {
				avatorSrc: '../../static/001.jpg',
				form: {
					code: '1707270119',
					password: '1707270119'
				},
				errorType: ['toast'],
				Inputstyle: {
					padding: "0 0 0 10rpx"
				},
				appHeight: 0,
				appWidtht: 0,
				// 表单验证规则
				rules: {
					code: [{
						required: true,
						message: '请输入学号',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'change'
					}]
				}
			}
		},

		// 监听页面初次渲染完成
		onReady() {
			// 调用表单验证方法
			this.$refs.uForm.setRules(this.rules);
		},
		// 方法
		methods: {
			// 登录
			submit() {
				// 表单验证

				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过:', valid);

						// 显示loading
						this.$refs.loading.showLoading()

						// this.gologin()

					} else {
						console.log('验证失败');
					}
				});


			},
			gologin() {
				// 登录操作
				let that = this
				axios.get('login', {
					params: this.form
				}).then(function(res) {
					console.log("成功", res);
					
					that.$refs.loading.hideLoading() // 隐藏
					
					// 学号错误
					if (res.data.code == -1) {
						console.log(res.data.msg)
						that.$refs.uTips.show({
							title: res.data.msg,
							type: 'error',
							duration: '2300'
						})
					}else  {
						that.$refs.uTips.show({
							title: res.data.msg,
							type: 'error',
							duration: '2300'
						})
						uni.switchTab({
							url: '/pages/index/index'
						});
					}
					
				}).catch(function(error) {
					console.log("失败", error);
					that.$refs.uTips.show({
						title: error,
						type: 'error',
						duration: '2300'
					})
				});
			}
		}

	}
</script>

<style lang="scss">
	* {
		padding: 0;
		margin: 0;
	}

	// 背景自适应
	uni-page-body {
		height: 100%;
	}

	.login_box {
		height: 100%;
		width: 100%;
		// background-color: red;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title_box {
			width: 100%;
			height: 30%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			background-color: #5c84bf;

			.title_text {
				color: #FFFFFF;
				font-size: 50rpx;
				font-weight: 900;
			}

			.avator_box {
				border-radius: 100rpx;
				height: 200rpx;
				width: 200rpx;
				overflow: hidden;
			}

			.name {
				color: #FFFFFF;
				font-size: 40rpx;
			}
		}

		.content {
			background-color: #dce6f2;
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.school_name {
				flood-color: #000000;
				font-size: 50rpx;
				margin: 30rpx 0;
			}

			.u-form {
				width: 80%;
				padding: 20rpx 0;

				.u-form-item {

					.u-input {
						background-color: #FFFFFF;
					}
				}
			}

			.u-button {
				width: 400rpx;
			}
		}
	}
</style>
